<template>
	<block v-for="(item,index) in proTask" :key="index">
	<view class="list" v-if="item.slProjectByPid.slProjectStoreTasksByPid.nodes.length >0">
		<view class="title">
			{{item.slProjectByPid.slProjectStoreTasksByPid.nodes.length}}
			{{item.slProjectByPid.title}}-奖励任务
		</view>
		<view class="content">
			<view class="task_group" v-for="(task,key) in item.slProjectByPid.slProjectStoreTasksByPid.nodes" :key="key">
				<view class="top">
					<view class="label" >
						<text v-if="task.type == '1'">金额任务</text>
						<text v-if="task.type == '2'">订单任务</text>
						<text v-if="task.type == '3'">拉新任务</text>
						<text>￥{{task.reward}}</text>
						<view class="taskimg"><image src="../../../static/icon/task.png" mode=""></image></view>
					</view>
					<view class="label-text">
						<text>分享消费{{task.where1}}单，可获得奖励</text>
						<text>未完成</text>
					</view>
				</view>
				<view class="down">
					<view class="pogress">
					<aiProgress :percentage='60' bgColor='#C7171E' inBgColor='#fff'></aiProgress>
					</view>
					<view class="button">
						<text @click="goPage('/pages/user/wallet/orderlist',task)">消费明细</text>
						<text>继续分享</text>
					</view>
				</view>
			</view>
			
			<!-- <view class="task_group">
				<view class="top">
					<view class="label">
						<text>金额任务</text>
						<text>￥20</text>
						<view class="taskimg"><image src="../../../static/icon/task.png" mode=""></image></view>
					</view>
					<view class="label-text">
						<text>分享消费5单，可获得奖励</text>
						<text>未完成</text>
					</view>

				</view>
				<view class="down">
					<view class="pogress">
					<aiProgress :percentage='40' bgColor='#C7171E' inBgColor='#fff'></aiProgress>
					</view>
					<view class="button">
						<text>消费明细</text>
						<text>继续分享</text>
					</view>
				</view>
			</view> -->
		</view>
	</view>
	</block>
</template>

<script>
	import aiProgress from "@/components/ai-progress/ai-progress.vue"
	export default{
		components: {
			aiProgress
		},
		data(){
			return{
				uid:'',
				stepList:[1,2,3],
				active:2,
				proTask:[]
			}
		},
		onLoad() {
			let user= uni.getStorageSync('userData');
			 this.uid = user.uid
			 console.log('user',user)
			 this.tasklist()
		},
		methods:{
			goPage(url,task){
				uni.navigateTo({
					url:url+'?id='+task.pid
				})
			},
			//获取项目信息
			async tasklist() {
				const tasklist = await this.GQL({
					"operationName": "allSlUserProjectvips",
					"query": "query allSlUserProjectvips($filter: SlUserProjectvipFilter) { allSlUserProjectvips(filter: $filter) { nodes { uid pid level slProjectByPid { title slProjectStoreTasksByPid { nodes { pid reward online type uid where1 tid } } } } } }",
					"variables": {"filter": {"uid": {"equalTo": this.uid}}}
				})
				
				console.log('111',tasklist);
				if(tasklist.data.allSlUserProjectvips.nodes !=''){
					// tasklist.data.allSlUserProjectvips.nodes.)
					this.proTask = tasklist.data.allSlUserProjectvips.nodes
				}
				
				
			}
			
			
			
			
		}
	}
</script>

<style lang="scss">
	.list{
		padding: 16px;
		.title{
			font-size: 20px;
			font-weight: 600;
			margin-bottom: 12px;
		}
		.content{
			background: #fff;
			padding: 14px;
			border-radius: 5px;
			box-shadow: 1px -2px 10px 6px rgba(0, 0, 0, 0.1);
		}
		.task_group{
			border: 1px solid #EAEAEA;
			margin-bottom: 16px;
			border-radius: 5px;
			.top{
				padding: 12px 10px;
				.label{
					font-size: 16px;
					font-weight: 600;
					display: flex;
					justify-content: space-between;margin-bottom: 4px;
					>text:nth-child(2){
						color: #C7171E;
					}
					position: relative;
				}
				.taskimg{
					position: absolute;
					left: -12px;
					top: -12px;
					image{
						width: 28px;
						height: 28px;
						
					}
				}
				.label-text{
					display: flex;
					justify-content: space-between;
					font-size: 11px;
					color: #c2c2c2;
				}
			}
			.down{
				padding: 12px 10px;
				background-color: #EAEAEA;
				.button{
					display: flex;
					justify-content: flex-end;
					text{
						font-size: 13px;
						text-align: right;
						display: inline-block;
						padding: 3px 6px;
						border-radius: 5px;
						margin-left: 4px;
					}
					text:nth-child(1){
						color:#C7171E;
						border:1px solid #C7171E;
						background-color: #FFFFFF;
					}
					text:nth-child(2){
						color:#FFFFFF;
						border:1px solid #C7171E;
						background-color: #C7171E;
					}
				}
			}
		}
		.pogress{
			height: 50px;
		}
	}
</style>
